<template>
    <div class="tasklistContent">
        <div class="tasklistBox">
            <h3 style="padding:0;margin: 0;">我的任务</h3>
            <div class="mytasklist">
                <p>您的任务<i>{{examlist.totalSubject}}</i>个科目，共<i>{{examlist.totalGroup}}</i>个题题, 剩余<i>{{examlist.remainingTasks}}</i>道题未评完</p>
                <!-- <span>当前科目分配模式按 效率模式，完成任务量 即算评卷完成 </span> -->
            </div>
            <el-table
                :data="examlist.rows"
                border
                stripe
                style="width: 100%"
                height="400">
                <el-table-column
                prop="projectName"
                label="考试科目"
                width="300">
                </el-table-column>
                <el-table-column
                prop="examName"
                label="学科">
                </el-table-column>
                <el-table-column
                prop="questionNumbers"
                label="试题编号">
                </el-table-column>
                <el-table-column
                label="评阅进度">
                    <template slot-scope="scope"t="scope">
                        {{scope.row.completedTasks}}/{{scope.row.planTasks}}
                    </template>
                </el-table-column>
                <el-table-column
                label="评阅状态">
                    <template slot-scope="scope">
                        <span :class="{'spanred':scope.row.reviewStatus==0,'spanblue':scope.row.reviewStatus==1,'spangreen':scope.row.reviewStatus==2,'spangray':scope.row.reviewStatus==3,'spangray':scope.row.reviewStatus==null}">{{scope.row.reviewStatus==0?'未开始':scope.row.reviewStatus==1?'阅卷中':scope.row.reviewStatus==2?'已完成':'已结束'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="address"
                label="操作">
                    <template slot-scope="scope">
                        <span class="startReview" v-if="scope.row.configReviewStatus==1" @click="startReview(scope.row)">开始阅卷</span>
                        <b v-else class="endReview">开始阅卷</b>
                        <span class="startReview" style="color:#E37318" v-if="scope.row.completedTasks>0 || scope.row.reviewStatus==3" @click="Reviewskip(scope.row)">回评</span>
                        <b v-else class="endReview">回评</b>
                    </template> 
                </el-table-column>
            </el-table>
            <div class="buttconbox">
                <span @click="refshTask(1)">刷新任务</span>
                <b @click="refshTask(2)">返回</b >
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['examlist','reviewId'],
    data(){
        return{
            type:1
        }
    },
    methods: {
        tableRowClassName({ rowIndex }) {
            return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
        },
        refshTask(type){
            this.$emit('refshTask',type)
        },
        //跳至阅卷详情
        startReview(row){
            this.$router.push('/mark?projectId='+this.reviewId)
            sessionStorage.setItem('taskContent',JSON.stringify(row))
        },
        //跳至回评详情
        Reviewskip(row){
            this.$router.push('/mark?projectId='+this.reviewId)
            sessionStorage.setItem('taskContent',JSON.stringify(row))
        }
    }
}
</script>

<style scoped>
    >>> .el-table >>> .even-row {
        background-color: #FAFAFB;  /* 偶数行颜色 */
    }
    >>> .el-table >>> .odd-row {
        background-color: #ffffff;  /* 奇数行颜色 */
    }
    .tasklistContent{
        width:100%;
        height:100%;
        position:fixed;
        left:0;
        top:0;
        background:rgba(0,0,0,0.7);
        z-index:1000;
    }
    .tasklistBox{
        width: 1040px;
        height: 584px;
        background: #FFFFFF;
        box-shadow: 0 4px 16px 0 #5572921a;
        position:absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        padding:24px;
        position:relative;
    }
    .mytasklist{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size:14px;
        color:#333;
    }
    .mytasklist i{
        font-style: normal;
        display: inline-block;
        padding:0 8px;
        color:#1A48DB;
    }
    >>> .el-table th.el-table__cell > .cell{
        text-align: center;
    }
    >>> .el-table--enable-row-transition .el-table__body td.el-table__cell{
        text-align: center;
    }
    .buttconbox{
        display: flex;
        align-items: center;
        position:absolute;
        left:30px;
        bottom:30px;
    }
    .buttconbox span,.buttconbox b{
        display: inline-block;
        width: 124px;
        height: 34px;
        border-radius: 10px;
        font-size:14px;
        cursor: pointer;
        text-align: center;
        line-height:34px;
    }
    .buttconbox span{
        background: #1A48DB;
        color:#fff;
    }
    .buttconbox b{
        font-style:normal;
        background: #F2F6FB;
        border: 1px solid #1A48DB;
        color:#1A48DB;
        font-weight: normal;
        margin-left:24px;
    }
    .spanred,.spanblue,.spangreen,.spangray{
        display: inline-block;
        width: 76px;
        height: 22px;
        border-radius: 6px;
        text-align:center;
        line-height:22px;
        font-size:14px;
    }
    .spanred{
        background: #ec555a0f;
        border: 1px solid #ec555a80;
        color:#EC555A
    }
    .spanblue{
        background: #1a48db0f;
        border: 1px solid #1a48db80;
        color:#1A48DB;
    }
    .spangreen{
        background: #288f410f;
        border: 1px solid #288f4180;
        color:#288F41;
    }
    .spangray{
        background: #5b63710f;
        border: 1px solid #5b637180;
        color:#5B6371
    }
    .startReview{
        font-weight: 400;
        font-size: 14px;
        color: #1A48DB;
        text-decoration: underline;
        cursor: pointer;
        margin:0 5px;
    }
    .endReview{
        font-weight: 400;
        font-size: 14px;
        color: #5B6371;
        margin:0 5px;
    }
</style>